<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        class="filter-item"
        size="small"
        @click="create"
      >添加产品</el-button>
    </div>
    <el-table
      :data="item.filter(x => x.status !== -99)"
      :border="false"
      fit
      style="width: 100%;"
    >
      <el-table-column label="名称">
        <template slot-scope="{row: { product }}">
          <span>{{ product.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="{row}">
          <span>{{ row.selected_sku_text | skuText }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价">
        <template slot-scope="{row}">
          <el-input v-model="row.price" />
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template slot-scope="{row}">
          <el-input v-model="row.quantity" />
        </template>
      </el-table-column>
      <el-table-column label="小计" align="center">
        <template slot-scope="{row}">
          <span>{{ +row.price * +row.quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="{row}">
          <el-input v-model="row.remark" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="220"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button type="success" size="mini" @click="save(row)">
            保存
          </el-button>
          <el-button type="danger" size="mini" @click="remove(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-container">
      <el-row style="color:red;">
        <el-col :span="4">总数量: {{total_quantity}}</el-col>
        <el-col :span="4">总金额: {{total_price}}</el-col>
      </el-row>
      <el-row v-if="showAdd">
        <el-divider></el-divider>
        <el-form>
          <el-col :span="6">
            <el-form-item label="商品">
              <el-select
                v-model="add.product"
                clearable
                filterable
                class="filter-item"
                @change="changeProduct"
                style="width: 300px"
              >
                <el-option
                  v-for="item in products"
                  :label="item.sn + ' ' + item.title"
                  :key="item.id"
                  :value="item.id"
                />
              </el-select>
              <p>可以编码或者产品名称搜索</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格">
              <el-select
                v-model="add.sku"
                clearable
                filterable
                class="filter-item"
                style="width: 300px"
                @change="changeSku"
              >
                <el-option
                  v-for="item in sku_list"
                  :label="item.names"
                  :key="item.id"
                  :value="item.id"
                />
              </el-select>
              <p>先选择产品</p>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="价格">
              <el-input v-model.trim="add.price" style="width: 100px" />
              <p>这里可以改单价</p>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="数量">
              <el-input v-model.trim="add.quantity" style="width: 100px" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="小计">
              <el-input disabled :value="(add.price * add.quantity).toFixed(2)" style="width: 100px" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="success" @click="saveAdd">保存</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'OrderEdit',
  filters: {
    skuText(v) {
      if (v && v.length > 0) {
        return JSON.parse(v).join(', ')
      }
      return ''
    }
  },
  computed: {
    total_quantity() {
      let sum = 0
      this.item.filter(x => x.status !== -99).forEach(x => {
        sum += +x.quantity
      })
      return sum
    },
    total_price() {
      let sum = 0
      this.item.filter(x => x.status !== -99).forEach(x => {
        sum += +x.quantity * +x.price
      })
      return sum
    }
  },
  data() {
    return {
      order: {},
      item: [],
      add: {
        product: null,
        sku: null,
        quantity: 1,
        price: 1
      },
      showAdd: false,
      products: [],
      sku_list: []
    }
  },
  methods: {
    fetch() {
      api.order.view({ id: this.$route.params.id }).then(response => {
        const { data } = response
        this.order = data.order
        this.item = data.order.item
        console.log(this.order)
      })
    },
    save(row) {
      // this.$set(row, 'quantity', row.quantity)
      api.order.editItem({ ...row }).then(() => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 3000
        })
      })
    },
    remove(row) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.order.editDelete({ id: row.id }).then(() => {
          this.$set(row, 'status', -99)
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 3000
          })
        })
      }).catch(() => {})
    },
    create() {
      this.showAdd = true
    },
    getProducts() {
      api.member.baoProduct().then(response => {
        const { data } = response
        this.products = data.list
        // 编辑没有定义
        this.products.forEach(x => {
          if (!x.sn) {
            this.$set(x, 'sn', '')
          }
        })
      })
    },
    changeProduct() {
      api.member.baoSku({ id: this.add.product }).then(response => {
        const { data } = response
        // 规格
        this.sku_list = [...data.list]
        this.add.sku = null
        // 价格
        this.products.forEach(x => {
          if (+x.id === +this.add.product) {
            this.add.price = x.price
            this.add.quantity = x.buy_quantity || 1
          }
        })
      })
    },
    changeSku() {
      this.sku_list.forEach(x => {
        if (+x.id === +this.add.sku) {
          this.add.price = x.price
          this.add.quantity = x.buy_quantity || 1
        }
      })
    },
    saveAdd() {
      const sku = this.sku_list.filter(x => +x.id === +this.add.sku)
      // console.log(sku)
      api.order.editSave({ ...this.add, sku: sku[0], order_id: this.order.id }).then(response => {
        const { data } = response
        this.item.push(data)
        this.add = {
          product: null,
          sku: null,
          quantity: 1,
          price: 1
        }
        this.showAdd = false
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 3000
        })
      })
    }
  },
  created() {
    this.fetch()
    this.getProducts()
  }
}
</script>

<style scoped lang="scss">

</style>
